
<!--
 * @Author: Jackie
 * @Date: 2020-12-05 21:10:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-12-08 22:45:22
 * @Description: 日历组件
 * @FilePath: \vue_demo\vue_mina\src\components\test.vue
-->
<template>
  <div class='demo-app'>
    <!--日历部分-->
    <div class='demo-app-main'>
      <FullCalendar
        class='demo-app-calendar'
        :options='calendarOptions'
      >
        <template v-slot:eventContent='arg'>
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
    </div>
   <!--日历部分-->
    <!--表单部分-->
    <el-card class="box-card">
      <!--操作按钮-->
      <div slot="header" class="clearfix">
        <span>总事件数({{ currentEvents.length }})</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogFormVisible = true">新增</el-button>
      </div>
      <!--对话框-->
      <el-dialog title="新建事件" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <!--日期选择-->
           <el-form-item label="选择日期" label-width="120px">
            <el-date-picker
              v-model="form.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker> 
          </el-form-item>
          <!--主题内容-->
          <el-form-item label="事件主题" label-width="120px">
            <el-input autocomplete="off" v-model="form.name"></el-input>
          </el-form-item>
         <!--颜色选择-->
          <el-form-item label="选择事件分类" label-width="120px">
            <el-color-picker
              v-model="form.color"
              show-alpha
              :predefine="predefineColors">
            </el-color-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" v-on:click="dialogFormVisible = false;addCalendar()">确 定</el-button>
        </div>
      </el-dialog>
      <!--时间线部分-->
      <el-timeline>
        <el-timeline-item
          v-for='event in currentEvents' :key='event.id'
          :color="event.backgroundColor"
          :timestamp= "event.allDay?event.startStr+' 00:00:00':event.startStr.slice(0,event.startStr.indexOf('+')).replace('T',' ')">
          {{event.title}}
        </el-timeline-item>
      </el-timeline>
      <!--时间线部分-->
    </el-card>
  </div> 
</template>


<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'
import {formatDate} from './get-time.js'
export default {
  components: {FullCalendar},
  data: function() {
    return {    
      calendarOptions: {
        firstDay:"1",
        weekNumberCalculation:"ISO" ,
        locale:"zh-cn",
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin //交互插件
        ],
        headerToolbar: {
          left: 'prevYear,prev,next,nextYear today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'dayGridMonth',//初始-月
        initialEvents: INITIAL_EVENTS, // 初始事件-测试数据
        editable: true,//允许事件被编辑
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,//选中
        eventClick: this.handleEventClick,//点击事件-触发
        eventsSet: this.handleEvents,
        buttonText:{
          today:"今天",month:"月",week:"周",day:"天"
        }
        
      },
      currentEvents: [],//当前事件
      dialogFormVisible:false,
      predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
        timer: "",//定义一个定时器的变量
        form: {
          name: '',
          date:  [new Date(2020, 11, 12, 10, 10), new Date(2020, 11, 12, 10, 10)],
          color: 'rgba(255, 69, 0, 0.68)',
        },
    }
  },
  methods: {
    //点击日历事件
    handleDateSelect(selectInfo) {
      //时间点****************************************************
      let mydate='';
      let startdate=new Date(selectInfo.startStr);
      let enddate=new Date(selectInfo.endStr);
      if(selectInfo.allDay){
        mydate=this.$moment(startdate).format('YYYY/MM/DD')+'--'+this.$moment(enddate-24*60*60*1000).format('YYYY/MM/DD')
      }else{
        mydate=this.$moment(startdate).format('YYYY/MM/DD hh:mm')+'--'+this.$moment(enddate).format('YYYY/MM/DD hh:mm')
      } 
      //*************************************************************************************

      //点击事件，存入数据*********************************************************************
      let title = prompt('您是否要在' + mydate + '添加一个新的事件?')
      let calendarApi = selectInfo.view.calendar
      calendarApi.unselect()
      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay,
          color:"#F5F5F5",
          textColor:"#696969",
        })
      }
    },
    //*************************************************************************************
    addCalendar(){
      let start=new Date(this.form.date[0])
      let end=new Date(this.form.date[1])
      let tmp=
        {
          id: createEventId(),
          title:this.form.name,
          start: formatDate(start),
          // end: formatDate(end),
          color:this.form.color,
          textColor:"#fff",
        }
      INITIAL_EVENTS.push(tmp)
      // console.log(INITIAL_EVENTS);
      // this.currentEvents = INITIAL_EVENTS
      
    },
    handleEventClick(clickInfo) {
      this.$confirm(`你确定要删除'${clickInfo.event.title}'事件吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{clickInfo.event.remove()})
        .catch(()=>{"取消了删除操作"})
    },
    //添加事件
    handleEvents(events) {
      this.currentEvents = events
      console.log(this.currentEvents);

    },
    //获取当前时间*************************************************************************************
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.timer = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
    }
    //*************************************************************************************
  },
created() {
    this.formatDate()
  },
beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>


<style lang='css' scoped>
.demo-app {
  display: flex;
  min-height: 100%;
}

.demo-app-sidebar {
  width: 300px;
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}
.demo-app /deep/.el-card {
  height: 100%;
  margin-top: 48px;
  margin-right: 10px;
}
.demo-app /deep/.el-card.is-always-shadow{
  box-shadow: none
}
.text {
    font-size: 14px;
  }

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
b { /* used for event dates/times */
margin-right: 3px;
}



.demo-app-main {
  flex-grow: 1;
  padding: 48px 10px 48px 48px
}

.fc {
  max-width: 1100px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 1px #808080;
}
.demo-app /deep/.fc-button{
   background-color: #DC143C;
   border: 0.1px solid #DC143C;
   box-shadow: none;
 }
.demo-app /deep/.fc-button-primary:active:focus{
  box-shadow: none;
}
.demo-app /deep/.fc-button-primary.fc-button-active:focus{
  box-shadow: none;
}
.demo-app /deep/.fc-event-main span{
  display: block;
  font-size: 10px;
  border:none;
  }

.demo-app /deep/.fc-event-main > i{
  display: block;
  font-size: 10px;
  border:none;
  font-style: normal;;
  }
.demo-app /deep/.fc-daygrid-event{
    overflow: hidden;
  }

</style>
